<template>
  <div id="">
    <div class="flex-main">
      <div class="flex-body">
        <!-- 预约时间 -->
        <div class="m-select-time padding">
          <span>预约日期</span>
          <i class="iconfont">&#xe621;</i>
          <input type="text" readonly class="times" id="times" v-model="birthday" placeholder="请选择时间" @click="openPicker">
        </div>
        <!-- mint ui 时间组件 -->
        <div class="datePicker">
             <mt-datetime-picker
                      type="date"
                      ref="picker"
                      year-format="{value} 年"
                      month-format="{value} 月"
                      date-format="{value} 日"
                      @confirm="handleConfirm"
                      :startDate="startDate"
                   >
              </mt-datetime-picker>
       </div>
       <!-- 时间点选择 -->
       <div class="m-times padding">
         <div class="m-title">
           <i class="iconfont">&#xe601;</i>
           <span>选择时间</span>
         </div>
         <div class="m-times-chunk">
           <div class="chunk" @click="clickTime(times.stime,times.etime,index)" v-for="(times,index) in TimeList" :key="index">
             <template v-if="checkTime(times.stime)==true">
               <div class="m-times-text" v-bind:class="{'active': times.click==true, 'close': times.hidden != 0}">
               <span>{{times.stime}}</span>~<span>{{times.etime}}</span>
               </div>
             </template>
           </div>

         </div>
       </div>
       <!-- 技师选择 -->
       <div class="m-person padding">
         <div class="m-title">
           <i class="iconfont">&#xe609;</i>
           <span>接待人员</span>
         </div>
         <div class="m-person-content">
           <template v-if="technicianList.length == 0">
             <p>请先选择预约时间!</p>
           </template>
           <template v-else-if="technicianList.length > 0">
             <div class="technician_info" v-bind:class="{'on':TechnicianIdx == index}" @click="clicktechnician(technician.Id,technician.Name,index)" v-for="(technician,index) in technicianList" :key="index">
                <i class="iconfont">&#xe62d;</i>
                <div class="technician_img">
                  <!-- <img src="@/assets/images/bg.png"> -->
                  <img :src="technician.headImg?technician.headImg:require('@/assets/images/bg.png')" alt="" mode='widthFix'>
                </div>
                <span>{{technician.Name}}</span>
             </div>


           </template>
         </div>

       </div>
      </div>
      <button class="m-next flex-bottom" @click="submit()">下一步</button>
    </div>

  </div>

</template>

<script>
import { DatetimePicker,Toast,Popup,Picker,Indicator  } from 'mint-ui';//- mint-ui插件
import {appointTime,appointTechnician} from '@/api/appointment.js';//- 封装接口
import {mapState,mapMutations} from 'vuex';
export default {
  name: '',
  data(){
    return{
      birthday:this.getDate (new Date()),  //- 选择显示时间
      startDate:new Date(),  //- 默认起始时间
      TimeList: [],  //- 预约时间数据
      starttime:"",  //- 预约起始时间
      endtime:"",  //- 预约结束时间
      start_index:'',  //- 当前点击选中时间的起始顺序
      end_index:'',  //- 当前点击选中时间的末尾顺序
      timeclick: 1,  //- 当前点击状态 1：第一次点击，2第二次点击
      technicianList: [],  //- 技师数据
      Technicianid: '',  //- 技师id
      Technicianname: '',  //- 技师名字
      TechnicianIdx: null,  //- 技师选择顺序id
      BASE_URL: process.env.API_HOST,//- 拼接url地址
    }
  },
  methods: {
    ...mapMutations(['appointment']),
    //- 打开mint ui时间插件
    openPicker () {
        this.$refs.picker.open()
    },
    //- 获取的时间为时间戳
    getDate (data){
      return this.birthday=new Date(data).getFullYear()+'-'+(new Date(data).getMonth()+1)+'-'+new Date(data).getDate();
    },
    //- 时间选择点击确定
    handleConfirm (data) {
      console.log(data);
      this.birthday=this.getDate (data);
      this.restore();
      this.showTime();
    },
    //- 点击前往其他页面
    goPage() {
      this.$router.push({name: 'appointment_project'});
    },
    //- 时间展示
    showTime() {
      appointTime().then(res=>{
        Indicator.close();
        let that = this;
        let data = res.list;
        for(let i= 0;i<data.length;i++){
          data[i].click=false;
        }
        that.TimeList = data;
      });
    },
    //- 检测时间点是否超过当前时间
    checkTime(last) {
      let that = this;
      //- 当前日期
      let date = that.birthday + " " + last;
      return !that.compareDate(date);
    },
    //- 判断时间点是否超过当前时间
    compareDate(date) {
      return +new Date > +new Date(date);
    },
    //- 还原已选中时间数据
    restore() {
      let that = this;
      that.starttime = '';
      that.endtime = '';
      that.start_index = '';
      that.end_index = '';
      that.timeclick = 1;
      that.technicianList = [];
      that.Technicianid = '';
      that.Technicianname = '';
      that.TechnicianIdx = null;
    },
    //- 选择时间
    clickTime(starttime,endtime,idx) {
      //- idx选中的时间序号,starttime选中的时间起始值,endtime选中的时间末值
      let that = this;
      let TimeList = that.TimeList;//- 时间数据

      if(TimeList[idx].hidden != 0){
        //- 0可以预约，-1不可预约
        Toast({
          message: '该时间段无法预约!',
          position: 'bottom',
          duration: 1500
        });
        return;
      }

      if(that.timeclick == 1){
        //- 当前点击第一次选中
        for(let i=0;i<TimeList.length;i++){
          TimeList[i].click = false;
        }
        that.starttime = starttime;
        that.endtime = endtime;
        that.start_index = idx;
        that.end_index = idx;
        that.timeclick = 2;
        TimeList[idx].click=true;
      }else if(that.timeclick == 2){
        //- 当前点击第二次选中
        if(idx == that.start_index){
          //- 说明取消第一个选中状态,返回到初始状态
          that.restore();
          TimeList[idx].click = false;
        }else{
          let oldindex = that.start_index;
          let differenceindex = +idx - +oldindex;
          if(differenceindex > 0){
            for(var i=0;i<=differenceindex;i++){
              var index_select = oldindex+i;
              TimeList[index_select].click = true;//- false代表未选中true代表已选中
            }
            that.endtime = endtime;
            that.end_index = idx;
            that.timeclick = 1;
          }else{
            for(var i=0;i<=Math.abs(differenceindex);i++){
              var index_select = oldindex-i;
              TimeList[index_select].click = true;//- false代表未选中true代表已选中
            }
            that.starttime = endtime;
            that.start_index = idx;
            that.timeclick = 1;
          }
        }
      }
      that.TimeList = TimeList;
      console.log(that.starttime +"||"+that.endtime)
      that.inquireTechnician();
    },
    //- 查询技师数据
    inquireTechnician() {
      let that = this;
      Indicator.open('加载中...');
      appointTechnician({
        start: that.birthday+" "+that.starttime,
        end: that.birthday+" "+that.endtime,
        shop_id: that.$route.query.shopid,
      }).then(res=>{
        Indicator.close();
        console.log(res.list);
        that.technicianList=res.list;

      });

    },
    //- 选择技师
    clicktechnician(technicianid,technicianname,index) {
      let that = this;
      that.Technicianid = technicianid;
      that.Technicianname = technicianname;
      that.TechnicianIdx = index;
    },
    //- 提交数据
    submit() {
      let that = this;
      if(that.starttime == ''){
        //- 判断有无选择时间
        Toast({
          message: '请选择时间!',
          position: 'bottom',
          duration: 1500
        });
        return;
      }
      if(that.Technicianid == ''){
        //- 判断有无选择技师
        Toast({
          message: '请选择技师!',
          position: 'bottom',
          duration: 1500
        });
        return;
      }
      let param = {
        starttime: that.starttime,
        endtime: that.endtime,
        shopid: that.$route.query.shopid,
        Technicianid: that.Technicianid,
        Technicianname: that.Technicianname,
        shopname: that.$route.query.shopname,
        birthday: that.birthday,
      }
      that.appointment(param);
      that.goPage();

    }

  },
  mounted() {
    //- 调用
    let that = this;
    Indicator.open('加载中...');
    that.showTime();

  }
}
</script>

<style lang="less" scoped src="@/less/appointment/appointment_time.less"></style>
